<template>
  <div class="container">
    <el-table
      :data="layout"
      style="width: 100%">
      <el-table-column
        prop="fileName"
        label="文件名"
        width="1200">
        <template slot-scope="scope">
          <el-button type="text" @click="handleOpen(scope.row)">{{ scope.row.fileName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            slot="reference"
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="timeSet(scope.row.filepath)"
          >定时设置
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 20px">
      <el-pagination
        v-show="total>0"
        :total="total"
        background
        @current-change="searchShell"
        :current-page.sync="search.currentPage"
        :page-size.sync="search.size"
        layout="total, prev, pager, next"
      />
    </div>

    <el-dialog
      :title="this.currentFile.fileName"
      :visible.sync="centerDialogVisible"
      width="70%"
      center>
      <el-form ref="form" :model="currentFile">
        <editor @init="editorInit"
                :options="options"
                lang="sh"
                theme="cobalt"
                height="400"
                v-model="currentFile.fileContent">
        </editor>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSave()">保 存</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="定时设置"
      :visible.sync="cronDialogVisible"
      width="70%"
      center>
      <el-form ref="form" :model="cronInfo">
        <el-input v-model="cronInfo.cron" placeholder="请用逗号分割"></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
           <el-button @click="cronDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleCronSave()">保 存</el-button>
        </span>

    </el-dialog>

  </div>
</template>

<script>

import {getShellScripts, saveShellScript, saveCron, getCron} from '@/api/user'

export default {
  data() {
    return {
      total: 0,
      search: {
        currentPage: 1,
        size: 10
      },
      layout: [],
      cronDialogVisible : false,
      cronInfo: {
        filepath: '',
        cron: ''
      },
      currentFile: {
        fileName: '',
        filePath: '',
        fileContent: ''
      },
      centerDialogVisible: false,
      options: {/*vue2-ace-editor编辑器配置自动补全等*/
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true/*自动补全*/
      },
      shellFiles: []
    }
  },
  created() {
    this.getShellList()
  },
  methods: {
    searchShell() {
      let skip = (this.search.currentPage - 1) * 10
      this.layout = []
      for (let i = skip, j = 0; i < skip + 10 && i < this.shellFiles.length; i++, j++) {
        this.layout[j]=this.shellFiles[i]
      }
    },
    timeSet(filepath) {
      console.log(filepath)
      this.cronDialogVisible=true
      this.cronInfo.filepath=filepath
      console.log(this.cronInfo.filepath)
      getCron({filepath: filepath}).then(res=>{

        this.cronInfo.cron = res.data.cron + ''
      })
    },
    handleCronSave() {
      var crons = this.cronInfo.cron.split(',')
      saveCron({
        filepath: this.cronInfo.filepath,
        cron:crons
      }).then(res => {
        if (res.data) {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.cronDialogVisible = false
          this.$router.push({name: 'ShellScriptInfo'})
        } else {
          this.$message({
            message: '设置失败',
            type: 'error'
          })
        }
      })
    },
    handleSave() {
      console.log(this.currentFile)
      saveShellScript(this.currentFile).then(res => {
        if (res.data) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.centerDialogVisible = false
          this.$router.push({name: 'ShellScriptInfo'})
        } else {
          this.$message({
            message: '保存失败',
            type: 'error'
          })
        }
      })
    },
    handleOpen(file) {
      this.currentFile = file
      this.content = file.fileContent
      this.centerDialogVisible = true
    },
    getShellList() {
      getShellScripts().then(res => {
        this.shellFiles = res.data
        this.total = this.shellFiles.length
        this.searchShell()
      })
    },
    editorInit() {
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/sh')    //language
      require('brace/theme/cobalt')
    }

  },
  components: {
    editor: require('vue2-ace-editor')
  },
}
</script>

<style scoped>
.container {
  padding: 50px;
  display: flex;
  flex-direction: column;
}

editor {
  padding: 50px;
  display: flex;
}
</style>
